<template>
  <div class='container-article'>
      <el-card>
        <el-row>
        <el-col :span="18">
          <!-- 表单 -->
          <el-form label-width="80px" inline size="small">
             <!-- 关键字搜索框 -->
            <el-form-item label="关键字">
              <el-input v-model="requestParams.keyword"
                placeholder="根据文章标题搜索"
              />
            </el-form-item>
             <!-- /关键字搜索框 -->
             <!-- 状态下拉选择框 -->
           <el-form-item label="状态">
            <el-select v-model="requestParams.state" placeholder="请选择">  
            <el-option :value="0" label="启用"></el-option>
            <el-option :value="1" label="禁用"></el-option>
          </el-select>
        </el-form-item>
        <!-- 状态下拉选择框 -->
        <!-- 清除和提交按钮 -->
            <el-form-item>
              <el-button @click="clearSearch" >清除</el-button>
              <el-button type="primary" @click="onSearch" >搜索</el-button>
            </el-form-item>
        <!-- /清除和提交按钮 -->
          </el-form>
        </el-col>

        <!-- 按钮 -->
        <el-col :span="6" style="text-align: right">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="addlists"
          >新增技巧</el-button>
        </el-col>
        <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        style="margin-bottom: 15px"
         :closable="false"
      ></el-alert>
      </el-row>
         <!-- 内容区域 -->
  <el-table class="content-list" ref="singleTable" :data="articles" highlight-current-row style="width: 100%">
     <el-table-column label="序号" type="index" width="50">
     </el-table-column>
      <el-table-column label="文章标题">
         <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
            <a @click="openVideo(scope.row.videoURL)" v-if="scope.row.videoURL" href="#" class="el-icon-film"></a>
         </template>
      </el-table-column>
      <el-table-column label="阅读人数">
           <template slot-scope="scope">
             <span>{{scope.row.visits}}</span>
           </template>
      </el-table-column>
      <el-table-column label="录入人">
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
    </el-table-column>
    <el-table-column label="录入时间">
            <template slot-scope="scope">
               <span>{{scope.row.createTime | parseTimeByString}}</span>
            </template>
    </el-table-column>
    <el-table-column label="状态">
            <template slot-scope="scope">
                <span v-if="scope.row.state==0">已启用</span>
                <span v-else>已禁用</span>
            </template>
    </el-table-column>
    <el-table-column label="操作">
             <template slot-scope="scope">
                <el-link :underline="false" type="primary" @click="previewArticle(scope.row)">预览</el-link>
                <el-link :underline="false" type="primary" @click="toggleState(scope.row)">{{scope.row.state===1?'启用':'禁用'}}</el-link>
                <el-link :underline="false" :type="scope.row.state===1 ? 'info':'primary'" @click="openDialog(scope.row)" :disabled="scope.row.state===1">修改</el-link>
                <el-link :underline="false" :type="scope.row.state===1 ? 'info':'primary'" @click="delArticle(scope.row)" :disabled="scope.row.state===1||scope.row.totals > 0">删除</el-link>
            </template>
    </el-table-column>
 </el-table> 
      <!-- /内容区域 -->   
      <!-- 翻页   -->
      <el-pagination
           background
           layout="prev, pager, next,sizes,jumper"
           :total="total"
           :page-sizes="[5, 10, 20, 50]"
           :page-size="10"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
           :current-page="requestParams.page"
           >
      </el-pagination>
       <!-- 翻页   -->
      </el-card>
      <!-- 预览 -->
      <el-dialog
         title="提示"
         :visible.sync="dialogVisible"
         width="45%"
         :before-close="handleClose">
         <articles-preview :list="currArticle"></articles-preview>
         <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
         </span>
      </el-dialog>
       <!-- 预览 -->
       <!-- 新增 -->
            <el-dialog
              :title="`${currArticle.id?'修改':'新增'}文章`"
              :visible.sync="addVisible"
              width="50%"
              :before-close="handleClose">
              <articles-add :data="currArticle"  @onLoading="addLoding" @exitLoading="exit" :content="content" ></articles-add>
              
            </el-dialog>
       <!-- 新增 -->
      <!-- 视频 -->
    <div class="video-preview" v-if="videoURL">
      <div class="close" @click="closeVideo"><span class="el-icon-close"></span></div>
      <div class="box">
        <video :src="videoURL"  autoplay="autoplay"></video>
      </div>
    </div>

      <!-- 视频 -->


    </div>
</template>

<script>
import { simple,list,changeState,remove,add } from '@/api/hmmm/articles'
import { status } from '@/api/hmmm/constants'
import ArticlesPreview from '../components/articles-preview.vue'
import ArticlesAdd from '../components/articles-add'
export default {
  name:'ContainerArticle',
  data(){
    return{
      
      tableData: [],
       
       requestParams:{
        title:'',
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
       },
       articles:[],
       currArticle:{},
       total:0,
       dialogVisible:false,
       addVisible:false,
       videoURL:null,
       content:{}
        
    }
  },
  props:{},
  components:{
    ArticlesPreview,
    ArticlesAdd,
  },
  computed:{
    status(){
      return status 
    }
  },
  watch:{},
  created(){
    this.getSimple()
    this.getList()
    
  },
  mounted(){},
  methods:{
   async getSimple(){

     const res = await simple()
    //  console.log(res);

    },
  //查询列表
  async getList(){
      const {data} = await list(this.requestParams)
      this.articles = data.items
      this.total = data.counts
      
      
      // console.log(data.items);
  },
    handleCurrentChange(val) {
        this.requestParams.page = val
      this.getList()
      },
       handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleSizeChange(size){
        this.requestParams.page = 1
        this.requestParams.pagesize = size
        this.getList()
      },
      // 预览
      previewArticle(article){
          this.dialogVisible = true
          this.currArticle = article
      },
      // 禁用
     async toggleState(article){
        await changeState({
          id:article.id,
          state:article.state  === 1 ? 0 :1
        })
        this.$message.success('操作成功')
         article.state = article.state === 1 ? 0 : 1
      },
    //修改
    openDialog(content){
         this.addVisible= true
        this.content = content
        console.log(content);
    },
    //删除
    async delArticle(article){
        this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then(() => {
          remove(article)
          this.$message.success('删除成功')
          
          this.getList()
        }).catch(err => {
         this.$message.info('已取消删除')

        })


        
      
    },
    // 新增技巧
   addlists(){
        this.addVisible = true
        
      // await  add(event)
      //   this.getList()
    },
    //清除筛选条件
    
    //搜索按钮
    onSearch(){
      // this.requestParams.state = 1
      this.getList()
    },
    //清除按钮
    clearSearch(){
      this.requestParams={
        title:'',
        keyword: null,
        state: null,
        page: 1,
        pagesize: 10
      }
      this.getList()
    },
    openVideo(val){
        this.articles.forEach(item=>{
        this.videoURL= item.videoURL

      })
      console.log(this.videoURL);
    },
    //视频按钮
    closeVideo(){
      
        this.videoURL = null
    },
    addLoding(){
      this.getList()
      this.addVisible= false
    },
    exit(){
      this.addVisible = false
    }
}
}
</script>

<style scoped lang='scss'>
.container-article{
  padding: 10px 15px;
 .el-button{
  height: 34px;
}
.content-list{
  margin-top:15px;
}
 

}

 .el-link{
    margin-right: 10px;

  }
  .el-pagination{
    margin-top: 20px;
    margin-bottom: 20px;
    float: right;
  }
  .video-preview{
    // display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 9999;
  .close{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%,0);
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .box{
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    video{
      width: 100%;
      height: 100%;
    }
  }
  }

</style>
